<template>
  <div class="me">
    <div class="me-top">
      <div class="me-head">
        <div class="head-img">
          <van-image
            round
            width="2.2rem"
            height="2.2rem"
            @click="handleClickImg"
            src="https://img.yzcdn.cn/vant/cat.jpeg" />
          <van-uploader :before-read="handleFile" :preview-image="false" result-type="file" class="upheadImg" ref="upheadImg" />
        </div>
        <div class="head-username"> {{ username }} </div>
      </div>
    </div>
    <div class="me-cell">
      <van-cell-group title="操作">
        <van-cell title="设置" is-link to="/setting" />
        <van-cell title="我的收藏" is-link to="/shoucang" />
        <van-cell title="检查更新" is-link to="/upLoad" />
        <van-cell title="关于我们" is-link to="/about" />
      </van-cell-group>
    </div>
    <my-footer></my-footer>
    <!-- 上拉菜单 -->
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      @select="onSelect"
      @cancel="onCancel"
    />
  </div>
</template>

<script>
import myFooter from '@/components/Footer'
import { ImagePreview } from 'vant';
import { uploadAppImg } from '@/api/user'
export default {
  name: 'me',
  data () {
    return {
      show: false,
      actions: [
        { name: '头像预览', color: '#666666' },
        { name: '上传头像', color: '#666666' }
      ]
    }
  },
  computed: {
    username () {
      return this.$store.state.user.userName
    }
  },
  components: {
    myFooter
  },
  methods: {
    async handleFile (file) {
      let formData = new FormData()
      formData.append('userId', this.$store.state.user.userId)
      formData.append('uploadFile', file)
      
      let {data} = await uploadAppImg(formData)
      if (data.result == 'suc') {
          this.$toast('头像上传成功！');
      }
    },
    handleClickImg () {
      this.show = true
    },
    onCancel () {
      this.show = false
    },
    onSelect (item) {
      if (item.name == '头像预览') {
        this.show = false
        ImagePreview({
          images: [ 'https://img.yzcdn.cn/vant/cat.jpeg'],
          showIndex: false
        });
      } else {
        this.show = false
        this.$refs.upheadImg.$refs.input.click()
      }
    }
  }
}
</script>

<style lang="less">
@import '~@/assets/css/index.less';
.me {
  min-height: 100vh;
  background-color: #f8f8f8;
}
.me-top {
  background: #53a5dd;
  height: 4.8rem;
  width: 100%;
  .me-head {
    width: 80%;
    padding: 1.3rem 0 0 10%;
    .head-img {
      float: left;
      width: 2.2rem;
      height: 2.2rem;
      .upheadImg {
        visibility: hidden;
      }
    }
    .head-username {
      height: 2.2rem;
      margin-left: 2.2rem;
      padding-left: 20px;
      line-height: 2.2rem;
      color: #fff;
      font-size: @big-size;
      font-weight: 500;
    }
  }
}
</style>
